<template>
  <div class="ma-body">
    <div class="ma-head">
      <div class="ma-name">
        <h1>
          <i class="el-icon-setting"></i>
          &nbsp;新闻管理平台
        </h1>
       </div>
       <div class="ma-img" @click="denglu" v-if="$userInfo.token == ''">登录</div>
			 <div class="ma-img" v-else>
         <div style="padding-right:10px;">
           <span>管理员：</span>
           {{$userInfo.nickname === ""?"------":$userInfo.nickname}}
         </div>
				<el-dropdown @command="dropdownCommand">
					<span class="el-dropdown-link">
            <img v-if="$user_pic != 'undefined' && $user_pic != 'null' && $user_pic != ''" slot="reference" class="headimg" :src="$user_pic">
						<img v-else slot="reference" class="headimg" src="../../assets/img/head.png">
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="a">个人信息</el-dropdown-item>
						<el-dropdown-item command="b">修改密码</el-dropdown-item>
						<el-dropdown-item command="c">用户网页</el-dropdown-item>
						<el-dropdown-item command="d">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
       </div>
    </div>
    <div class="ma-buttom">
      <div class="ma-navigation">
        <el-menu
        :default-active="switchIndex"
        class="el-menu-vertical-demo"
        @select="menuselect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-document-copy"></i>
            <span>新闻管理设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <i class="el-icon-zoom-in"></i>
              新闻管理
              </el-menu-item>
            <el-menu-item index="1-2">
              <i class="el-icon-circle-plus-outline"></i>
              添加新闻
              </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-help"></i>
            <span>新闻发布设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">
              <i class="el-icon-thumb"></i>
              新闻发布
              </el-menu-item>
            <el-menu-item index="2-2">
              <i class="el-icon-coffee"></i>
              线上管理
              </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>成员管理设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">
              <i class="el-icon-edit-outline"></i>
              权限管理
              </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-view"></i>
            <span>新闻实时监测</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">
              <i class="el-icon-star-off"></i>
              新闻动态
              </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      </div>
      <div class="ma-conten" :style="{height:screenHeight +'px'}" >
        <div style="margin-top:50px;padding:20px;">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
    <edit-user @closedialog="closedialog" :dialogVisible="dialogVisible"></edit-user>
    <edit-pass @closedialogPassword="closedialogPassword" :dialogPass="dialogPass"></edit-pass>
  </div>
</template>

<script>
import editUser from '../../components/editUserInfo.vue'
import editPass from '../../components/editPassword.vue'
export default {
  components: {
    'edit-user': editUser,
		'edit-pass':editPass
  },
  data(){
    return {
      dialogPass:false,
      dialogVisible:false,
      screenHeight:window.innerHeight,
      switchIndex:'',
    }
  },
  mounted(){
    const that = this
    window.onresize =()  =>{
      return (()=>{
        window.screenHeight = window.innerHeight
        that.screenHeight = window.screenHeight;
      })()
    }
  },
  watch:{
    $route(){
      this.createMenu(this.$route.path)
    },
    screenHeight:{
      immediate:true,
      handler:function(val){
        this.screenHeight = val
      }
    }
  },
  created(){
    this.createMenu(this.$route.path)
  },
  methods:{
    //关闭弹窗
		closedialog(){
			this.dialogVisible = false
		},
    closedialogPassword(){
			this.dialogPass = false
		},
    //触发登录
		denglu(){
			this.$router.push("/record");
		},
    //头像下拉菜单回调
		dropdownCommand(e){
			if(e == 'c'){
				window.open('/client/clientHome')
			}
      if(e == 'a'){
				this.dialogVisible = true
			}
      if(e == 'b'){
				this.dialogPass = true
			}
			if(e == 'd'){ 
				this.$userInfo.username = ''
				this.$userInfo.nickname = ''
				this.$userInfo.email = ''
				this.$userInfo.power = ''
				this.$userInfo.pagePower = ''
				this.$userInfo.token = ''
				this.$user_pic = ''
				localStorage.setItem("token",'')
				localStorage.setItem("user_pic",this.$user_pic)
				localStorage.setItem("userInfo",escape(JSON.stringify(this.$userInfo)))
				this.$router.push("/record");
			}
		},
		menuselect(index){
      if(this.switchIndex == index) return
      this.switchIndex = index
      switch(index) {
        case '1-1':
          this.$router.push("/management/newsManage");
          break;
        case '1-2':
            this.$router.push("/management/newsAdd");
            break;
        case '2-1':
            this.$router.push("/management/newsPush");
            break;
        case '2-2':
            this.$router.push("/management/newsDelete");
            break;
        case '3-1':
            this.$router.push("/management/menberPower");
            break;
        case '4-1':
        this.$router.push("/management/newsDynamic");
        break;
        default:
            this.$router.push("/management/newsManage");
      }
    },
    createMenu(index){
      switch(index) {
        case '/management/newsManage':
          this.switchIndex = '1-1'
          break;
        case '/management/newsAdd':
          this.switchIndex = '1-2'
            break;
        case '/management/newsPush':
          this.switchIndex = '2-1'
            break;
        case '/management/newsDelete':
          this.switchIndex = '2-2'
            break;
        case '/management/menberPower':
          this.switchIndex = '3-1'
            break;
        case '/management/newsDynamic':
          this.switchIndex = '4-1'
        break;
        default:
          this.switchIndex = '1-1'
      }
    }
	}
}
</script>
<style scoped>
.ma-body{
  width: 100%;
  height: 100%;
}
.ma-head{
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background-color: rgb(84, 92,100);
  z-index: 999;
}
.ma-img{
  margin-right: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  color: rgb(241, 243, 248);
  cursor: pointer;
}
.ma-name {
  flex: 1;
  margin-left: 30px;
  font-size: 12px;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100%;
  color: rgb(201, 201, 216);
}
.ma-buttom {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.headimg{
  padding-top:4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.ma-navigation {
  padding-top: 100px;
  width: 250px;
  background-color: rgb(84, 92,100);
  overflow-y: auto;
}
.el-menu {
  border: 0;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #FFF;
}
.ma-conten {
  flex: 1;
  overflow:auto;
  background-color: rgb(247,243,247);
}
</style>